<template>
  <div class="container-login">
    <div class="title">e键校园网超零食系统</div>
    <div class="form">
      <div class="input">
        <div class="input-title">Login</div>
        <div class="userName">
          <input type="text" autocomplete="off" class="userName-input" v-model="userName" @focus="userNameFocus"
            @blur="userNameBlur" ref="userNameEl" />
          <div class="placeholder" :class="userNameIsFocus ? 'inputFocus' : 'inputBulr'" ref="userNamePlaceholderEl">
            userName
          </div>
        </div>
        <div class="passWord">
          <input type="password" autocomplete="off" class="passWord-input" v-model="passWord" @focus="passWordFocus"
            @blur="passWordBlur" ref="passWordEl" @keyup.enter="submit" />
          <div ref="passWordPlaceholderEl" class="placeholder" :class="passWordIsFocus ? 'inputFocus' : 'inputBulr'">
            passWord
          </div>
        </div>
      </div>
      <div class="submit">
        <div class="button" @click="submit">登录</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import jwt_decode from "jwt-decode"
import { ref } from "vue"
import { useRouter } from "vue-router"
import { useNotification, useMessage } from "naive-ui"
import { useAdminStore } from "@/stores/admin/index"
import { Login, getAdminName } from "@api/index"
import type { Admin_Info } from "@/config/var"
import { useStore } from "vuex";

const message = useMessage()
const notification = useNotification()
const AdminStore = useAdminStore()
const router = useRouter()
const userNameIsFocus = ref<boolean>(false)
const passWordIsFocus = ref<boolean>(false)
const userName = ref<string>("") //用户名
const passWord = ref<string>("") //密码
const userNameEl = ref<any>(null)
const userNamePlaceholderEl = ref<any>(null)
const passWordEl = ref<any>(null)
const passWordPlaceholderEl = ref<any>(null)
const submit = async () => {
  //提交登录
  if (!formVerify()) {
    message.warning("请填写账号和密码")
    return
  }
  window.$loading() //Loading动画开始加载
  //登录接口逻辑
  const res: any = await Login({
    adminUser: userName.value,
    adminPassword: passWord.value,
  })
  if (res.code == 200) {
    //登录成功
    passWord.value = ""
    userName.value = ""
    const token = res.data?.token
    const orgId = res.data?.orgId

    AdminStore.setToken(token) //缓存 Token
    AdminStore.setOrgId(orgId) //缓存 orgId
    const adminInfo: Admin_Info = jwt_decode(token) //解析 Token 获取管理员信息
    AdminStore.setAdminInfo(adminInfo) //全局缓存管理员信息
    const timer1: any = setTimeout(() => {
      message.success("登录成功,正在跳转至首页......")
      window.$closeLoading() //关闭Loading动画
      router.push({ path: "/" })
      // let markAsRead = false
      // const n = notification.create({
      //   title: "欢迎首次进入",
      //   content: `尊敬的超级管理员:${adminInfo.adminNick},小蝣对您的首次到来表示热烈欢迎！`,
      //   meta: new Date().toLocaleString(),
      //   avatar: () =>
      //     h(NAvatar, {
      //       size: "small",
      //       round: false,
      //       src: "https://taoyida.top/static/img/bozhu.jpg",
      //     }),
      //   action: () =>
      //     h(
      //       NButton,
      //       {
      //         text: true,
      //         type: "primary",
      //         onClick: () => {
      //           markAsRead = true
      //           n.destroy()
      //         },
      //       },
      //       {
      //         default: () => "已读",
      //       }
      //     ),
      //   onClose: () => {
      //     if (!markAsRead) {
      //       message.warning("请设为已读")
      //       return false
      //     }
      //   },
      // })
      clearTimeout(timer1)
    }, 2000)
  } else {
    //登录失败
    passWord.value = ""
    userName.value = ""
    setTimeout(() => {
      message.error("登录失败,账号或密码错误")
      window.$closeLoading()
    }, 2000)
  }
}
const formVerify = () => {
  //表单验证
  if (userName.value.trim() == "") {
    userNameEl.value.style.borderColor = "#F44336"
    userNamePlaceholderEl.value.classList.add("animate__shakeX")
  } else {
    userNameEl.value.style.borderColor = "#fff"
  }
  if (passWord.value.trim() == "") {
    passWordEl.value.style.borderColor = "#F44336"
    passWordPlaceholderEl.value.classList.add("animate__shakeX")
  } else {
    passWordEl.value.style.borderColor = "#fff"
  }
  setTimeout(() => {
    userNamePlaceholderEl.value.classList.remove("animate__shakeX")
    passWordPlaceholderEl.value.classList.remove("animate__shakeX")
  }, 1000)
  return userName.value.trim() != "" && passWord.value.trim() != ""
}

const userNameBlur = () => {
  //失去焦点
  if (userName.value.trim() == "") {
    userNameIsFocus.value = false
  } else {
    userNameEl.value.style.borderColor = "#fff"
  }
}
const userNameFocus = () => {
  //聚焦
  userNameIsFocus.value = true
  if (passWord.value.trim() == "") {
    passWordIsFocus.value = false
  }
}
const passWordBlur = () => {
  //失去焦点
  if (passWord.value.trim() == "") {
    passWordIsFocus.value = false
  } else {
    passWordEl.value.style.borderColor = "#fff"
  }
}
const passWordFocus = () => {
  //聚焦
  passWordIsFocus.value = true
  if (userName.value.trim() == "") {
    userNameIsFocus.value = false
  }
}
</script>

<style scoped lang="scss">
$border-radius: 6px;

.animate__shakeX {
  animation: shakeX 1s;
  color: #f44336 !important;
}

@mixin center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@mixin removeInputDefaultStyle {
  background: none;
  border: none;
  outline: none;
}

@mixin newInputStyle {
  width: 85%;
  color: #fff;
  font-size: 18px;
  box-sizing: border-box;
  padding: 5px;
  border-bottom: 2px solid #fff;
  transition: all 0.3s;
}

.placeholder {
  position: absolute;
  top: -7px;
  left: 5px;
  font-size: 18px;
  // color: #97f6c2;
  // color: var(--themeColor);
  color: #333;
  opacity: 0.7;
  font-weight: bold;
  transition: all 0.3s;
}

.inputFocus {
  font-size: 14px;
  top: -25px;
}

.inputBulr {
  font-size: 18px;
  top: -7px;
}

.container-login {
  width: 100vw;
  height: 100vh;
  // background-image: linear-gradient(135deg, #81fbb8 10%, #28c76f 100%);
  background: url("@/static/image/bizhi.png") no-repeat;
  background-size: cover;
  position: relative;

  .title {
    font-size: 35px;
    color: #fff;
    letter-spacing: 8px;
    text-align: center;
    transform: translateY(30px);
  }

  @media (max-width: 768px) {
    .form {
      width: 100% !important;
    }
  }

  .form {
    width: 750px;
    height: 330px;
    display: flex;
    // background-image: linear-gradient(135deg, #28c76f 10%, #81fbb8 100%);
    background: rgba(255, 255, 255, 0.2);
    // -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(2px);
    @include center;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
    border-radius: $border-radius;

    .input {
      flex: 1;
      height: 100%;
      // background-image: linear-gradient(135deg, #28c76f 10%, #81fbb8 100%);
      border-top-left-radius: $border-radius;
      border-bottom-left-radius: $border-radius;
      position: relative;

      .input-title {
        font-size: 20px;
        color: #fff;
        // color: #333;
        // border-bottom: 2px solid #97f6c2;
        border-bottom: 2px solid var(--themeColor);
        width: 65px;
        text-align: center;
        margin-top: 50px;
        margin-left: 60px;
      }

      .userName {
        margin-top: 50px;
        margin-left: 60px;
        position: relative;

        .userName-input {
          @include removeInputDefaultStyle;
          @include newInputStyle;
        }
      }

      .passWord {
        margin-top: 60px;
        margin-left: 60px;
        position: relative;

        .passWord-input {
          @include removeInputDefaultStyle;
          @include newInputStyle;
        }
      }
    }

    .submit {
      width: 200px;
      height: 100%;
      // background: #28c76f;
      border-top-right-radius: $border-radius;
      border-bottom-right-radius: $border-radius;
      // border-left: 2px solid #eee;
      position: relative;

      .button {
        @include center;
        width: 60px;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        font-size: 14px;
        color: #fff;
        // border: 1px solid #81fbb8;
        // var(--themeColor)
        border: 2px solid #fff;
        cursor: pointer;
      }
    }
  }
}
</style>
